<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人信息</title>
    <link rel="shortcut icon" href="logo.ico">
    <link rel="stylesheet" href="libs/bootstrap-4/css/bootstrap.css">
    <link rel="stylesheet" href="fonts/iconfont.css">
    <script src="libs/jquery.min.js"></script>
    <script src="libs/bootstrap-4/js/bootstrap.bundle.js"></script>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/information.css">
</head>

<body>
    <!--头部开始-->
    <header>
        <nav class="navbar navbar-expand-lg navbar-light">
            <h1 class="navbar-brand main-title" href="index.html">环球鞋网</h1>
            <button class="navbar-toggler navbar-button" type="button" data-toggle="collapse"
                data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <h2 class="nav-link">
                            <a href="index.html">首页</a>
                        </h2>
                    </li>
                    <li class="nav-item">
                        <h2 class="nav-link">
                            <a href="http://localhost:8080/category.html?cid=1">限时秒杀</a>
                        </h2>
                    </li>
                    <li class="nav-item">
                        <h2 class="nav-link">
                            <a href="http://localhost:8080/category.html?cid=2">捕头严选</a>
                        </h2>
                    </li>
                    <li class="nav-item">
                        <h2 class="nav-link">
                            <a href="http://localhost:8080/category.html?cid=3">优选爆款</a>
                        </h2>
                    </li>
                </ul>
                <form class="form-inline my-2 my-lg-0">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item dropdown">
                            <h2 class="nav-link dropdown-toggle private-information" href="#" id="navbarDropdown"
                                role="button" data-toggle="dropdown" aria-expanded="false">
                                个人中心
                            </h2>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="myorder.html">我的订单</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="car.html">购物车</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">收藏商品</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="information.html">用户信息</a>
                            </div>
                        </li>
                        <li class="nav-item">
                            <h2 class="nav-link">
                                <a href="#">商家后台</a>
                            </h2>
                        </li>
                        <li class="nav-item">
                            <h2 class="nav-link">
                                <a href="#">联系客服</a>
                            </h2>
                        </li>
                        </li>
                    </ul>
                </form>
            </div>
        </nav>
        <!--头部结束-->
    </header>
    <!--头部结束-->
    <div class="info">
        <!-- 左侧总览开始 -->
        <div class="info-summary">
            <div>
                <img src="images/用户照片.png" alt="" class="summary-portrait">
                <div class="summary-name">臭居居</div>
                <button class="summary-vip">加入环球会员</button>
                <div class="summary-viptip">首次开通会员低至5折起</div>
            </div>
            <div class="summary-option">
                <div class="option-information">个人资料</div>
                <div class="option-post">订单管理</div>
                <div class="option-area">收货地址</div>
                <div class="option-change">修改密码</div>
            </div>
        </div>
        <!-- 左侧总览结束 -->
        <!-- 个人信息编辑开始 -->
        <div class="info-master" id="userInfo">
            <h1 class="master-title" id="master-title">个人资料</h1>
            <div>
                <p>头像</p>
                <img src="images/用户照片.png" alt="">
                <button href="" class="head-admit">修改头像</button>
            </div>
            <div>
                <p>昵称</p>
                <input id="username" type="text" placeholder="取一个有趣又好记的名字吧！" value="臭居居">
                <button class="master-admit">保存</button>
            </div>
            <div>
                <p>个人简介</p>
                <input type="text" placeholder="用一句话来将您的人格魅力展现得淋漓尽致吧！">
                <button class="master-admit">保存</button>
            </div>
            <div>
                <p>邮箱</p>
                <input type="text" placeholder="请绑定您的邮箱">
                <button class="master-admit">保存</button>
            </div>
            <div>
                <p>手机号码</p>
                <input id="userTel" type="text" placeholder="请绑定您的手机">
                <button class="master-admit" id="telChange">保存</button>
            </div>
            <p class="master-modify" id="master-modify">修改密码</p>
        </div>
        <!-- 个人信息编辑结束 -->
        <!-- 修改密码页面开始 -->
        <div class="info-change">
            <h1 class="change-title" id="change-title">修改密码</h1>
            <div>
                <p>旧密码</p>
                <input type="text" class="oldPwd" placeholder="旧的不去">
            </div>
            <div>
                <p>新密码</p>
                <input type="text" class="newPwd" placeholder="新的不来">
            </div>
            <div>
                <p>重复新密码</p>
                <input type="text" class="reNewPwd" placeholder="防止输错新密码的最新政策！">
            </div>
            <button class="change-save">保存</button>
        </div>
        <!-- 修改密码页面结束 -->
    </div>
</body>
<script>
    let userInfo = sessionStorage.getItem("shopping.userInfo");
    if(userInfo){
        let user = JSON.parse(userInfo);
        let uid = user.id;
        fetch(`showUserInfor.user?uid=${uid}`).then(response=>response.json()).then(data=>{
            $("#userTel").prop("value",`${data.data.tel}`);
        })
        //手机号修改
        $("#telChange").on("click",function (){
            let userTel = $("#userTel").val();
            if(userTel==""){
                alert("请输入你想要修改的手机号");
            }else if(userTel.length!=11){
               alert("手机号码格式有错误,请重新输入") ;
            }else{
                fetch(`bandingTel.user?tel=${userTel}&uid=${uid}`).then(response=>response.json()).then(data=>{
                    console.log(data);
                    alert("修改手机号成功!");
                })
            }
        })
        $("#username").prop("value",`${user.username}`);
        $(".summary-name").text(`${user.username}`);
        $(".master-modify").click(function () {
            $(".info-master").attr("style", "display:none;");
            $(".info-change").attr("style", "display:inline-block;");
        });
        $(".option-information").click(function () {
            $(".info-change").attr("style", "display:none;");
            $(".info-master").attr("style", "display:inline-block;");
        });
        $(".option-change").click(function () {
            $(".info-change").attr("style", "display:inline-block;");
            $(".info-master").attr("style", "display:none;");
        });
        $(".change-save").click(function () {
            var oldPassword = $(".oldPwd").val();
            var newPassword = $(".newPwd").val();
            var reNewPassword = $(".reNewPwd").val();

            if (oldPassword == "") {
                alert("旧密码不能为空！")
            } else if (newPassword == "") {
                alert("新密码不能为空！");
            } else if (reNewPassword == "") {
                alert("确认新密码不能为空！");
            } else if (newPassword != reNewPassword) {
                alert("两次输入新密码不一致！");
            } else {
                $.ajax({
                    url: `updatePwd.user?oldPwd=${oldPassword}&newPwd=${newPassword}&uid=${uid}`,
                    type: "POST",
                    data: {
                        oldPassword: oldPassword,
                        newPassword: newPassword
                    },
                    dataType: 'json',
                    success: function (data) {
                        console.log(data)
                        if (data.flag == true) {
                            alert("密码修改成功！");
                            //密码修改成功，请重新登陆！
                        }else {
                            alert("旧密码错误,请重试!");
                        }
                    },
                    error: function (msg) {
                        alert("密码修改失败，请联系管理员！");
                    }
                })
                $(".info-change").attr("style", "display:none;");
                $(".info-master").attr("style", "display:inline-block;");
                $(".oldPwd").val("");
                $(".newPwd").val("");
                $(".reNewPwd").val("");
            }
        });
    }else{
        alert("用户未登录,请去登录!")
        setTimeout(function (){
            location.href = 'login.html';
        },1000);
    }
</script>

</html>